<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>圈子详情</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/circle.css">
    <style scoped>
      
    </style>
</head>

<body>
    <div class="app" style="height: 100vh"  v-cloak>
       <!-- 轮播 -->
       <div class="circle-video-swiper">
            <div class="swiper-container">
                <div class="swiper-wrapper" >
                    <template v-for="(detail,index) in detailArray">
                        <div class="swiper-slide" style="background: #000;" :key="index" >
                            <video class="fileVideo" v-if="detail.medias[0].videoPath" id="player"
                                    :autoplay="videoCurrentIndex===index" loop webkit-playsinline playsinline x5-playsinline
                                    style="border-radius: 8px" :poster="detail.medias[0].imagePath" :src="detail.medias[0].videoPath">
                            </video>
                            <span style="position: absolute; color: red; font-size: 18px;left: 20px; top: 50px;">
                                {{videoCurrentIndex}}
                            </span>
                            <!-- 头部 -->
                            <div style="background: transparent;"  class="circle-video-header">
                                <div class="flex-x-sb" style="position: relative;">
                                    <span class="iconfont goback" @click="back">&#xe66f;</span>
                                    <div class="circle-header-btns" @click="handleFun">
                                        <span v-for="item in 3" :key="item"></span>
                                    </div>
                                    <div class="circle-handle-select-box" v-show="showPopBox">
                                        <div class="circle-handle-select-item" @click="">
                                            <!-- circle_collect_select -->
                                            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/circle_collect.png" />
                                            收藏
                                        </div>
                                        <div class="circle-handle-select-item">
                                            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/report_icon.png" />
                                            举报
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 视频详情介绍 -->
                            <div class="circle-video-detail-description">
                                <div class="title-user">
                                    <img class="title-user-img" :src="detail.headImg" alt="" >
                                    <span class="title-user-nickname">{{ detail.nickName }}</span>
                                    <span v-if="detail.attentionFlag != -1" class="title-tag" @click="handleFollow">{{detail.attentionFlag ? '已关注' : '关注'}}</span>
                                </div>
                                <div class="circle-video-detail-content">
                                    <div class="circle-video-detail-text">
                                        {{ detail.videoShotDescription }}
                                        <span v-show="needOpenBtn" class="circle-video-showMore" @click="handleOpenMoreComment">...展开</span>
                                    </div>
                                    <div v-if="!needOpenBtn" class="circle-video-detail-other">
                                        <div class="circle-video-detail-time">{{ detail.publishTime }}</div>
                                        <div class="circle-video-slideup" @click="handleCloseMoreComment">收起</div>
                                    </div>
                                </div>
                            </div>
                            <!-- 按钮区 -->
                            <div class="circle-comment-fixed-btns circle-comment-fixed-blackBac">
                                <!-- 发表评论 -->
                                <div class="circle-comment-search-btn " @click="getComments(detail.topicId)">说点什么吧~
                                </div>
                                <!-- 分享 -->
                                <!-- @click="handleShare" -->
                                <div class="circle-comment-share-btn">{{detail.forwardNumber}}
                                </div>
                                <!-- 点赞 -->
                                <div class="circle-comment-thumpup-btn" :class="[detail.likeFlag ? 'active': '']" @click="handleThumpUp(detail)">{{detail.likeNumber}}
                                </div>
                                <!-- 评论 -->
                                <!-- @click="getComments" -->
                                <div class="circle-comment-speak-btn" @click="getComments(detail.topicId)">{{detail.commentNumber}}
                                </div>
                            </div>
                            <!-- 评论 -->
                            <div class="circle-comment-pop-box" v-show="showCommentPopBox">
                                <div class="circle-comment-pop-close" @click="handleCloseComment"></div>
                                <div class="circle-comment-box">
                                    <div class="circle-comment-head">{{detail.commentNumber}}条评论</div>
                                    <div class="circle-comment-list">
                                        <div class="circle-comment-list-item" v-for="(item, index) in commentLists" :key="'comment' + index">
                                            <img class="circle-comment-item-avator" :src="item.headImg" alt="avator">
                                            <div class="circle-comment-item-box">
                                                <div class="circle-comment-item-main">
                                                    <div class="circle-comment-list-content">
                                                        <div class="circle-comment-item-title">{{ item.nickName }}</div>
                                                        <div class="circle-comment-item-content" @click.stop="doWrite(item)">{{ item.content }}
                                                            <span class="circle-comment-item-time">{{ item.publishTime }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="circle-comment-thumpup" @click="handleCommentThumpUp(item)">
                                                        <img class="circle-comment-thumpup-img" :src="item.thumbsFlg ? thumpupActiveIcon : thumpupIcon " alt="thumpup">
                                                        <p class="circle-comment-thumpup-num">{{ item.thumbsNum }}</p>
                                                    </div>
                                                </div>
                                                <div class="circle-comment-item-replay" v-if="item.childTopicComments && item.childTopicComments.length > 0">
                                                    <template v-for="(subItem, subIndex) in item.childTopicComments" >
                                                        <div class="circle-comment-list-item" v-if="subIndex === 0 || item.showMore" :key="'replay' + subIndex">
                                                            <img class="circle-comment-item-avator" :src="subItem.headImg" alt="avator">
                                                            <div class="circle-comment-list-content" @click.stop="doWrite(item,subItem)" >
                                                                <div class="circle-comment-item-title" @click.stop="doWrite(item,subItem,subItem.userId,subItem.nickName)">{{ subItem.nickName }}</div>
                                                                <div class="circle-comment-item-content">
                                                                    <span v-if="subItem.toNickName">回复 
                                                                        <span class="circle-comment-replay-username" @click.stop="doWrite(item,subItem,subItem.toUserId,subItem.toNickName)">{{subItem.toNickName}}</span> 
                                                                    </span>
                                                                    {{ subItem.content }}
                                                                    <span class="circle-comment-item-time">{{ subItem.publishTime }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="circle-comment-thumpup" @click="handleCommentThumpUp(subItem)">
                                                                <img class="circle-comment-thumpup-img" :src="subItem.thumbsFlg ? thumpupActiveIcon : thumpupIcon " alt="thumpup">
                                                                <p class="circle-comment-thumpup-num">{{ subItem.thumbsNum }}</p>
                                                            </div>
                                                        </div>
                                                    </template>
                                                    <div v-if="!item.showMore && item.childTopicComments.length > 1" class="circle-comment-list-replay-morebtn" @click="showMoreComment(item, index)">展开{{item.childTopicComments.length - 1}}条回复</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="circle-comment-list-nomore">- 没有更多了 -</div>
                                </div>
                                <!-- 评论输入框 -->
                                <div class="dynamic_detail_write flex-x-s iphonex-padding-bottom" v-show="showCommentPopBox" @click.stop="doWrite()">
                                    <input type="text" placeholder="说点什么吧~" maxlength="500"  readonly>
                                    <div class="send_btn">发送</div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <!-- <div class="swiper-pagination" id="pagination"></div> -->
            </div>
        </div>
        
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/swiper-3.4.2.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/restful.js"></script>
    <script>
        apiready = function () {
            let mySwiper
            let scrollType = 'gtTopicId'; // 滑动的动作: gtTopicId: 往上滑, ltTopicId: 往下滑
            var UIScrollPlayer = api.require('UIScrollPlayer');
            var inputField = api.require('inputField');
            var vm = new Vue({
                el: '.app',
                data: {
                    // topicId: api.pageParam.topicId,
                    topicId: '1405434284705161217',
                    showPopBox: false, // 是否弹出评论层
                    showCommentPopBox: false, // 是否弹出评论层
                    needOpenBtn: false, // 是否需要展开按钮
                    thumpupIcon: 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/thumpup_icon.png', // 未点赞状态
                    thumpupActiveIcon: 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/thumpup_selected_icon.png', // 点赞状态
                    detailCurrent: 
                    {
                        topicId: "1405484455308685314",
                        userId: "1386199564362330114",
                        nickName: "波2222222",
                        headImg: "http://mfs.tiexiecloud.com:81/group1/M00/00/1D/wKgAKWDL-hGAAjkqAAPOve2ZHis629_m.png",
                        createTime: 1623928581000,
                        updateTime: 1623928581000,
                        publishTime: "06-17 19:16",
                        attentionFlag: 0,
                        title: "送你22222",
                        content: "女磨破22222",
                        medias: [
                            {
                                videoPath: null,
                                mediaType: "0",
                                imagePath: "http://mfs.tiexiecloud.com:81/group1/M00/00/1D/wKgAKWDLLvSAQFPAAAzr6K3Ps1Y909_m.png",
                                sequence: 0,
                                videoId: null
                            },
                            {
                                videoPath: null,
                                mediaType: "0",
                                imagePath: "http://mfs.tiexiecloud.com:81/group1/M00/00/1D/wKgAKWDLLvSAQFPAAAzr6K3Ps1Y909_m.png",
                                sequence: 0,
                                videoId: null
                            },
                        ],
                        likeNumber: 0,
                        likeFlag: null,
                        commentNumber: 0,
                        hitNumber: "0",
                        forwardNumber: null,
                        channelId: "120",
                        sort: null,
                        auditStatus: 1,
                        type: 0,
                        location: "121.323425,31.290426",
                        phone: "18017587671",
                        status: 1
                    },
                    commentLists: [], // 评论列表
                    detailArray: [],
                    queryParams: {
                        channelId: null, // 列表页-推荐-二级tab类型id
                        screenType: 0, // 0: 推荐 1: 关注 2: 点在视频 3: 我的动态
                        pageNum: 1,
                        pageSize: 3,
                        topicId: '1405109482593247233', // 文章id
                        keyword: '' // 列表页搜索字段
                    },
                    scrollQueryParams: { // 滑动时请求参数
                        channelId: null, // 列表页-推荐-二级tab类型id
                        screenType: 0, // 0: 推荐 1: 关注 2: 点在视频 3: 我的动态
                        pageNum: 1,
                        pageSize: 3,
                        [scrollType]: '',
                        keyword: '' // 列表页搜索字段  
                    },
                    videoCurrentIndex: 1, // 当前视频所在的index
                    videos: [],
                },
                created() {
                    // api.addEventListener({
                    //     name:'initDetail',
                    // },  (ret, err) => {
                    //     this.initDetail()
                    // })
                },
                mounted() {
                   
                   this.initVideoArray()
                //    this.initSwiper()
                },
                
                methods: {
                    // 初始化轮播
                    initSwiper(){
                        const vm = this
                        mySwiper = new Swiper(".swiper-container", {
                            direction: 'vertical',
                            initialSlide: 1, // 初始化位置
                            slidesPerView: "auto", // 
                            centeredSlides: !0, // 默认居中
                            watchSlidesProgress: !0, // 
                            observer:true, 
                            observeParents:true, // 实时监听swiper的子元素的变化
                            onSlideChangeStart: function(swiper){
                                vm.videoCurrentIndex = swiper.activeIndex
                                console.log(vm.detailArray.length)
                                
                                if(swiper.activeIndex === vm.detailArray.length - 2) {
                                    // swiper.removeSlide(0)
                                    // vm.detailArray.push(vm.detailCurrent)
                                    // vm.scrollAddVideo('down')
                                }
                                if(swiper.activeIndex === 1){
                                    // vm.scrollAddVideo('up')
                                    // vm.detailArray.unshift(vm.detailCurrent)
                                }
                                // swiper.update()
                                vm.pauseAllVideo(swiper.activeIndex)

                                // vm.$nextTick(() => {
                                //     const videoList = document.querySelectorAll('video')
                                //     console.log(videoList.length)
                                // })
                                
                            },
                            // // 向下切换
                            // onSlideNextStart: function(swiper){
                            //     // swiper.removeSlide(0); //移除第一个
                            //     // mySwiper.appendSlide('')
                            //     vm.detailArray.push(vm.detailCurrent)
                            //     // vm.detailArray = vm.detailArray.slice(1)
                            // },

                            // // 向上切换
                            // onSlidePrevStart: function(swiper){
                            //     vm.detailArray.unshift(vm.detailCurrent)
                            //     // vm.detailArray.pop()
                            // }
                        });
                    },

                    // 暂停所有视频播放仅播放当前视频
                    pauseAllVideo(activeIndex){
                        console.log(activeIndex)
                        this.$nextTick(() => {
                            const videoList = document.querySelectorAll('video')
                            console.log(videoList.length)
                            videoList.forEach((item, index) => {
                                if(activeIndex !== index){
                                    item.pause()
                                } else {
                                    item.play()
                                }
                            })
                        })
                    },
                    // index:必选，num，指定将要切换到的slide的索引。
                    // speed:可选，num(单位ms)，切换速度
                    // runCallbacks:可选，boolean，设置为false时不会触发onSlideChange回调函数。
                    // mySwiper.slideTo(0, 1000, false);//切换到第一个slide，速度为1秒
                    // mySwiper.removeSlide([0, 1]); //移除第一个和第二个
                    // mySwiper.removeSlide(0); //移除第一个
                    
                    // 触发初始化事件
                    

                    // 初始化视频列表 
                    initVideoArray(){
                        const vm = this
                        fnGet(interfaces.CONTENT_MODULE.CIRCLE.GET_VIDEO_DETAIL, this.queryParams, false,
                            function (ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    vm.detailArray = ret.data
                                    vm.$nextTick(()=>{
                                        vm.initSwiper() // 初始化播放器
                                    })
                                } else {
                                    toastBottom(ret ? ret.msg : '');
                                }
                            }
                        );
                    },

                    // 返回上一级
                    back() {
                        api.closeWin();
                    },

                    // 动态 点赞/取消点赞
                    handleThumpUp(item){
                        var vm = this;
                        circle("doThumb")(item, function(ret) {
                            item.likeFlag = !item.likeFlag;
                            if (item.likeFlag === true) {
                                item.likeNumber += 1;
                                toastMiddle('点赞成功')
                            } else {
                                item.likeNumber -= 1;
                                toastMiddle('取消点赞')
                            }
                        })
                    },


                    // 滑动获取更多数据
                    scrollAddVideo(dir){
                        const vm = this
                        // 判断方向, 更改请求参数
                        console.log(this.videoCurrentIndex)
                        if(dir = 'up'){
                            delete this.scrollQueryParams.ltTopicId
                            this.scrollQueryParams.gtTopicId = this.detailArray[this.videoCurrentIndex].topicId
                        } else{
                            delete this.scrollQueryParams.gtTopicId
                            this.scrollQueryParams.ltTopicId = this.detailArray[this.videoCurrentIndex].topicId
                        }
                        // 请求加载更多数据
                        fnGet(interfaces.CONTENT_MODULE.CIRCLE.GET_MORE_NEWDETAIL, this.scrollQueryParams, false,
                            function (ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    vm.detailArray.push(ret.data)
                                } else {
                                    toastBottom(ret ? ret.msg : '');
                                }
                            }
                        );
                        
                    },

                    // 往下滑动
                    slideToDownDir(){
                        mySwiper.appendSlide  
                    },

                    // mySwiper.appendSlide('<div class="swiper-slide">这是一个新的slide</div>'); //加到Swiper的最后
                    // mySwiper.prependSlide('<div class="swiper-slide">这是一个新的slide</div>'); //加到Swiper的第一个


                    // 展开更多详情
                    handleOpenMoreComment(){
                        this.needOpenBtn = false
                        this.$set(this.detailCurrent, 'videoShotDescription', this.detailCurrent.content)
                        this.$nextTick(() => {
                            this.handleChangeDetailHeight()
                        })
                    },
                    
                    // 收起更多详情
                    handleCloseMoreComment(){
                        this.needOpenBtn = true
                        this.$set(this.detailCurrent, 'videoShotDescription', this.detailCurrent.content.slice(0, subStrLength))
                        this.$nextTick(() => {
                            this.handleChangeDetailHeight()
                        })
                    },

                    // 关注
                    handleFollow(){
                        const vm = this
                        circle("doFollow")(vm.detailCurrent, function(ret) {
                            vm.detailCurrent.attentionFlag = !vm.detailCurrent.attentionFlag;
                            // 更新列表关注状态
                            // this.initDetail();
                        })
                    },

                    // 头部 - 点击右侧三个点
                    handleFun(){
                        this.showPopBox = !this.showPopBox
                    },

                    // 查看评论
                    getComments(topicId){
                        const vm = this
                        this.showCommentPopBox = true
                        // 请求加载更多数据
                        fnGet(interfaces.CONTENT_MODULE.CIRCLE.GET_MOMENTS, {topicId: topicId }, false,
                            function (ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    vm.commentLists = ret.data
                                } else {
                                    toastBottom(ret ? ret.msg : '');
                                }
                            }
                        );
                    },

                    // 关闭评论
                    handleCloseComment(){
                        this.showCommentPopBox = false
                    },

                    // 展开更多回复评论
                    showMoreComment(item, index){
                        this.$set(this.commentLists[index], 'showMore', true )
                    },

                    // 评论 点赞/取消点赞
                    handleCommentThumpUp(item){
                        var vm = this;
                        circle("doComentThumb")(item, function(ret) {
                            item.thumbsFlg = !item.thumbsFlg;
                            if (item.thumbsFlg) {
                                item.thumbsNum += 1;
                                toastMiddle('点赞成功')
                            } else {
                                item.thumbsNum -= 1;
                                toastMiddle('取消点赞')
                            }
                        })
                    },

                    // 隐藏输入框
                    hideInput(e) {
                        inputField.close();
                        inputField.resignFirstResponder();
                    },

                    // 写评论
                    doWrite(comment, childComment, toUserId, toNickName) {
                        if(!checkToken()) return false;
                        let vm = this
                        let item = {}
                        if (comment) {
                            item = {
                                topicId: vm.topicId,
                                toUserId: comment.userId,
                                topicCommonId: comment.topicCommonId,
                                nickName: comment.nickName
                            }
                            if (childComment) {
                                item.topicCommonId = comment.topicCommonId
                                item.toUserId = childComment.toUserId
                                item.nickName = childComment.nickName
                            }
                            if (toUserId) {
                                item.toUserId = toUserId
                            }
                            if (toNickName) {
                                item.nickName = toNickName
                            }
                        } else {
                            item = {
                                topicId: vm.topicId,
                                toUserId: undefined,
                                topicCommonId: undefined,
                                nickName: ''
                            }
                        }
                        var tempName = item.nickName;
                        if (item.nickName !== '请输入') {
                            tempName = '回复' + item.nickName + ':'
                        }
                        inputField.open({
                            bgColor: '#f7f7f7',
                            lineColor: '#f7f7f7',
                            fileBgColor: '#fff',
                            borderColor: '#fff',
                            sendBtn: {
                                bg: '#3F8CEC', //字符串类型；发送按钮常态背景色
                                inputBg: '#3F8CEC', //(可选项)字符串类型；当输入文字发时送按钮的背景色；默认：bg的色值
                                bgHighlight: '#000', //字符串类型；发送按钮点击时的高亮背景色
                                title: '发送', //字符串类型；发送按钮的标题
                                titleSize: 13, //数字类型；发送按钮的标题字体大小
                                titleColor: '#fff', //字符串类型；发送按钮标题文字颜色
                                corner: 5, //数字类型；发送按钮圆角大小
                                sendW: 45, //数字类型；发送按钮的宽
                                sendH: 30, //数字类型；发送按钮的高
                                marginRight: 10, //数字类型；发送按钮距离屏幕右边的距离，本参数暂仅支持iOS平台；默认：10
                            },
                            placeholder: tempName,
                            placeholderStyles: {
                                color: '#c1c1c1', //字符串类型；占位文字颜色，支持rgb、rgba、#；默认：#696969
                                size: 15, //数字类型；占位文字大小；默认：13
                                marginL: 5,
                            },
                            fixedOn: api.frameName
                        }, function (ret, err) {

                            if (ret) {
                                if (!ret.msg || ret.msg == '') {
                                    toastMiddle('您还没有输入内容！');
                                    return false
                                }
                                const param = {
                                    content: ret.msg,
                                    toUserId: item.toUserId,
                                    topicCommentId: item.topicCommonId,
                                    topicId: item.topicId
                                }
                                fnPost(interfaces.CONTENT_MODULE.CIRCLE.COMMENTON_NEWS, param,
                                    function (ret, err) {
                                        if (ret && ret.code === RESPONSE_OK) {
                                            toastMiddle('评论成功');
                                            vm.detailCurrent.commentNumber++;
                                            setTimeout(() => vm.initDetail(vm), 600)
                                        } else {
                                            toastBottom(ret ? ret.msg : '');
                                        }
                                    }
                                );
                                inputField.close();
                                inputField.resignFirstResponder();
                            } else {
                                // alert(JSON.stringify(err));
                            }
                        });
                        inputField.becomeFirstResponder(function (ret, err) {
                            if (ret.status) {
                                // alert(JSON.stringify(ret));
                            } else {
                                // alert(JSON.stringify(err));
                            }
                        });
                    },
                    
                },
            })
            
        }
    </script>
</body>

</html>